<template>
  <div>
      账号：<input type="text" v-model="user.acc"><br>
      密码：<input type="text" v-model="user.pwd"><br>
      <button @click="handler">提交</button>
      <hr>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'

/**
* 作业一:
通过query 参数传递 ，将登陆界面输入的账号进行传递，至 Home 页面。如果输入 账号admin 则在Home页面显示 “管理员”，如果输入 其他账号信息则显示 “普通用户” 信息 


*/
//定义用户账号密码变量
const user = ref({
  acc:'',
  pwd:''
})
//
const router = useRouter();

const handler = e => {
  //判断值是否存在 防止报错
  if (user.value.acc.length > 0 && user.value.pwd.length > 0) {
      //通过动态路由的方式将参数传递给Home1
      router.push({ name: 'Home1', params: { acc: user.value.acc, pwd: user.value.pwd } })
  }else alert('请输入账号密码') //错误提示
  
}

</script>

<style lang="scss" scoped>

</style>